{% extends "base.html" %}

{% block meta %}
    <meta name="menu-tag" content="42"/>
{% end block %}

{% block main %}
<div class="container">
    <ol class="breadcrumb">
        <li class="active">学生信息</li>
    </ol>
    
    <!-- 搜索表单开始 -->
    <div class="form-inline">
        <div class="form-group">
            <input type="text" id="name" placeholder="学号或姓名包含" class="form-control" />
        </div>
        <div class="form-group">
            <select class="form-control" id="status">
                <option value="1">有效</option>
                <option value="0">失效</option>
            </select>
        </div>
        <div class="form-group">
            <button type="button" class="btn btn-primary" id="btnSearch">查询</button>
        </div>
    </div>
    <!-- 搜索表单结束 -->

    <!-- 查询结果开始 -->
    <table class="table table-striped table-bordered" >
        <caption>
            <h4><strong>查询结果</strong></h4>
            <ul class="pagination pagination-sm" style="float:left;">
                <li title="第一页"><a href="javascript:goFirst();">&laquo;</a></li>
                <li title="上一页"><a href="javascript:goPrev();">&lsaquo;</a></li>
                <li title="当前页" class="active"><a href="#" id="pageIndex">1</a></li>
                <li title="下一页"><a href="javascript:goNext();">&rsaquo;</a></li>
                <li title="最末页"><a href="javascript:goLast();">&raquo;</a></li>
                <li>
                    <a href="#">共<strong id="total">0</strong>条记录，<strong id="pageCount">0</strong>页</a>
                </li>
            </ul>
            <div style="float:right;padding:5px">
                <button class="btn btn-primary btn-sm" data-bind="click:$root.newStudent">添加学生</button>
            </div>
        </caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody data-bind="foreach:search_students">
            <tr>
                <td data-bind="text:accountname"></td>
                <td data-bind="text:truename"></td>
                <td data-bind="text:status()==1?'有效':'失效'"></td>
                <td>
                    <button type="button" class="btn btn-sm btn-success" data-bind="click:$root.showClasses">所在班级</button>
                    <button type="button" class="btn btn-sm btn-warning" data-bind="click:$root.editStudent">修改</button>
                    <button type="button" class="btn btn-sm btn-danger" data-bind="visible:status()==0, click:$root.deleteStudent">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!-- 添加/修改对话框开始 -->
<div id="dlg" class="modal fade" data-bind="with:selectedStudent">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">学生信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-md-2">学号</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" 
                                data-bind="value:accountname, attr:{readonly:accountid>0}" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2">姓名</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" data-bind="value:truename"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="code" class="control-label col-md-2">状态</label>
                        <div class="col-md-10">
                            <label class="radio-inline">
                                <input type="radio" name="status" value="1" data-bind="checked:status,checkedValue:1"/>有效
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="status" value="0" data-bind="checked:status,checkedValue:0"/>失效
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2">
                            <button type="button" class="btn btn-default" data-bind="click:$root.confirmStudent">更新</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 添加/修改对话框结束 -->

<!-- 所属班级对话框开始 -->
<div id="dlgClasses" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">学生所属实验班级</h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>班级名称</th>
                            <th>课程名称</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach:studentClasses">
                        <tr>
                            <td data-bind="text:classname"></td>
                            <td data-bind="text:coursename"></td>
                        </tr>
                    </tbody>
                </table>
                <div class="form-group">
                    <div class="col-md-offset-2">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 所属班级对话框结束 -->
{% end block %}


{% block script %}
<script src='{{static_url("js/dateformat.js") }}'></script>

<script type="text/javascript">
    var total = 0;
    var pagecount = 1;

    var search_data = {
        name : "",
        status : 1,
        pageindex : 1,
        pagesize : 10
    };

    function Student(accountid, accountname, truename, status){
        var self = this;
        self.accountid = accountid;
        self.accountname = ko.observable(accountname ? accountname : "");
        self.truename = ko.observable(truename ? truename : "");
        self.status = ko.observable(status == undefined ? 1 : status);
    }

    function ModelView(){
        var self = this;
        self.search_students = ko.observableArray();
        self.selectedStudent= ko.observable();
        self.studentClasses = ko.observableArray();

        self.newStudent = function(){
            self.selectedStudent(new Student());
            $("#dlg").modal({ 'backdrop': 'static' });
        };
        self.editStudent = function(){
            self.selectedStudent(this);
            $("#dlg").modal({ 'backdrop': 'static' });
        };
        self.confirmStudent = function(){
            obj = this;
            url = obj.accountid ? '/student_editstudent' : '/student_newstudent';
            type = obj.accountid ? 'put' : 'post';
            data = {
                accountid : obj.accountid,
                accountname : obj.accountname(),
                truename : obj.truename(),
                status : obj.status()
            };
            $.ajax({
               url : url,
               type : type,
               data : JSON.stringify(data),
               dataType : 'json',
               success: function(result){
                    if(result.code == 'success'){
                        bootbox.alert('操作成功！');
                        $("#dlg").modal('hide');
                        search();
                    } else{
                        bootbox.alert(result.message);
                    }
               }
            });
        };
        self.deleteStudent = function(){
            accountid = this.accountid
            accountname = this.accountname();
            bootbox.confirm('确定要删除学生【' + accountname + '】吗？删除该学生也将删除其所有实验数据信息。', function(choice){
                if(choice){
                   $.ajax({
                    url :  '/student_deletestudent?id=' + accountid,
                    type : 'delete',
                    dataType: 'json',
                    success : function(result){
                        if(result.code == 'success'){
                            bootbox.alert('删除成功！');
                            $("#dlg").modal('hide');
                            search();
                        } else{
                            bootbox.alert(result.message);
                        }
                    }
                   });
                }
            });
        };
        self.showClasses = function(){
            $.getJSON('/student_getstudentclasses?id=' + this.accountid, function(results){
                self.studentClasses(results);
                $("#dlgClasses").modal({ 'backdrop': 'static' });
            })
        };
    }

    var modelView = new ModelView();
    ko.applyBindings(modelView);

    $(document).ready(function(){
        search();

        $("#btnSearch").click(function(){
            search_data.name = $("#name").val();
            search_data.status = $("#status").val();
            search_data.pageindex = 1;
            search();
        });
    });

    function search(){
        $.ajax({
            url : '/student_studentsearch',
            type : 'get',
            data : search_data, // 注意，get模式下使用JSON.stringify(search_data)无效
            dataType : 'json', 
            success : function(results){
                search_students = [];
                for(var i=0;i<results.search_students.length;i++){
                    item = results.search_students[i];
                    search_students.push(new Student(item.accountid, item.accountname, item.truename, item.status));
                }
                total = results.total;
                fillPagerInfo();
                modelView.search_students(search_students);
            }
        });
    }

    function fillPagerInfo(){
        $("#pageIndex").html(search_data.pageindex.toString());
        $("#total").html(total.toString());
        pagecount = Math.ceil(total / search_data.pagesize)
        $("#pageCount").html(pagecount.toString());
    }

    function goLast(){
        search_data.pageindex = pagecount;
        search();
    }
    function goFirst(){
        search_data.pageindex = 1;
        search();
    }
    function goPrev(){
        search_data.pageindex = search_data.pageindex > 1 ? search_data.pageindex - 1 : 1;
        search();
    }
    function goNext(){
        search_data.pageindex = search_data.pageindex < pagecount ? search_data.pageindex + 1 : pagecount;
        search();
    }
</script>
{% end block %}
